<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
  
    <script src="websocket.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ////通过POST方法请求，个别浏览器有可能有问题(自行测试)
            //httpposttoserver(1, "login", "123");
            ////通过Get方法jsonp请求，个别浏览器有可能有问题(自行测试)
            //httpgettoserver(1, "login", "123");
            var ss = "683A160000000D060300010044400000C012440045400000002044004640000040114400474000000083440049400000208244004A400000C06D4400";
            stringtobyte(ss);
            //conn();
        });

        function stringtobyte(hexString) {


            hexString = hexString.replace(" ", "");
            if ((hexString.length % 2) != 0)
                hexString += " ";
            var returnBytes=[];
            var len = hexString.length / 2;
            for (var i = 0; i < len; i++) {
                var tem = parseInt(hexString.substring(i * 2, i * 2 + 2), 16);
                
                returnBytes.push(tem);
            }
            return returnBytes;
        }

        var socket;
        function conn() {
            //这是使用证书时使用
            //
            socket = new UDCsocket({
                //115.28.26.204
                ip: 'ws://127.0.0.1', port: 11001, conn: function () {
                  //  socket.settakon("123123");
                    alert("连接成功");
                    //socket.SendData(1, "login", "123123ssdfsdf", "");
                }
                , recData: function (text) {
                    //$('#test').html("");
                    $('#test').append("收到:" + text + '<br/>  ')//这个意思你们都懂了把
                }
                , close: function () { alert("连接关闭"); }
                , error: function (msg) { alert("连接错误" + msg); }
                , jump: function (ip) { alert("服务器超过最大连接，请连接其他服务器：" + ip); }
            });

        }
        function SendData() {
            //socket.SendData(0x02, "GetLISTimei", '', "");
            var list = [];
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            list.push(data);
            $('#test').html('收到:<br/>  ');
            socket.SendData(0x04, "getonlinedalaba", list, "");
        }
        function SendData2() {
            $('#test').html('收到:<br/>  ');
            socket.SendData(0x02, "GetLISTimei", '', "");
            //socket.SendData(0x04, "getonlinedanseping", "1609092A005", "");
        }

        var data = [{ "Points": ["36, 231", "37, 229", "37, 230", "37, 232", "38, 229", "38, 232", "39, 228", "39, 233", "39, 234", "40, 223", "40, 224", "40, 225", "40, 226", "40, 227", "40, 233", "40, 234", "41, 224", "41, 232", "42, 223", "42, 233", "43, 223", "43, 232", "44, 223", "44, 231", "45, 223", "45, 230", "46, 222", "46, 229", "47, 222", "47, 228", "48, 223", "48, 224", "48, 225", "48, 226", "48, 227", "48, 228"], "AreaNum": 1, "PixelNumber": 97, "CenterPoint": "42, 227" }, { "Points": ["59, 225", "59, 226", "59, 227", "59, 228", "59, 230", "59, 231", "60, 225", "60, 229", "60, 232", "60, 233", "61, 225", "61, 233", "62, 225", "62, 233", "63, 225", "63, 233", "64, 225", "64, 234", "65, 225", "65, 234", "66, 225", "66, 233", "67, 224", "67, 233", "68, 225", "68, 226", "68, 234", "69, 227", "69, 228", "69, 231", "69, 232", "69, 233", "70, 229", "70, 230"], "AreaNum": 5, "PixelNumber": 101, "CenterPoint": "64, 229" }, { "Points": ["62, 257", "63, 256", "63, 258", "63, 259", "64, 255", "64, 260", "64, 261", "64, 268", "65, 255", "65, 261", "65, 265", "65, 266", "65, 267", "65, 268", "66, 256", "66, 257", "66, 262", "66, 263", "66, 264", "66, 268", "67, 258", "67, 267", "68, 257", "68, 266", "69, 256", "69, 265", "70, 257", "70, 265", "71, 257", "71, 258", "71, 259", "71, 264", "72, 260", "72, 263", "73, 259", "73, 263", "74, 260", "74, 261", "74, 262", "74, 263"], "AreaNum": 6, "PixelNumber": 98, "CenterPoint": "67, 260" }, { "Points": ["69, 278", "69, 280", "69, 281", "69, 282", "69, 283", "70, 274", "70, 275", "70, 276", "70, 277", "70, 279", "70, 284", "71, 273", "71, 285", "72, 270", "72, 271", "72, 272", "72, 285", "73, 270", "73, 285", "74, 271", "74, 275", "74, 276", "74, 277", "74, 278", "74, 284", "75, 271", "75, 272", "75, 274", "75, 279", "75, 283", "75, 284", "76, 273", "76, 275", "76, 276", "76, 280", "76, 281", "76, 282", "77, 274", "77, 275", "78, 273", "78, 274", "78, 275", "78, 276"], "AreaNum": 9, "PixelNumber": 99, "CenterPoint": "72, 277" }, { "Points": ["73, 242", "73, 243", "73, 244", "73, 245", "73, 246", "73, 247", "74, 241", "74, 248", "74, 249", "74, 250", "74, 251", "74, 252", "75, 232", "75, 233", "75, 234", "75, 235", "75, 236", "75, 237", "75, 238", "75, 239", "75, 240", "75, 253", "76, 233", "76, 234", "76, 251", "76, 252", "77, 235", "77, 250", "78, 235", "78, 249", "79, 234", "79, 235", "79, 248", "79, 249", "80, 236", "80, 247", "81, 235", "81, 246", "82, 236", "82, 246", "82, 247", "83, 237", "83, 245", "84, 237", "84, 242", "84, 245", "84, 246", "85, 237", "85, 241", "85, 243", "85, 244", "86, 237", "86, 238", "86, 239", "86, 240", "86, 241"], "AreaNum": 12, "PixelNumber": 175, "CenterPoint": "78, 242" }, { "Points": ["194, 219", "194, 220", "194, 221", "194, 222", "195, 218", "195, 223", "196, 218", "196, 223", "197, 219", "197, 223", "198, 220", "198, 223", "199, 219", "199, 221", "199, 224", "200, 219", "200, 220", "200, 221", "200, 222", "200, 224", "201, 219", "201, 220", "201, 223", "202, 217", "202, 218", "202, 220", "202, 224", "203, 219", "203, 223", "203, 225", "204, 219", "204, 220", "204, 221", "204, 222", "204, 223", "204, 224", "205, 221", "205, 222", "206, 222", "207, 222", "207, 223"], "AreaNum": 26, "PixelNumber": 60, "CenterPoint": "199, 221" }, { "Points": ["216, 175", "216, 176", "216, 177", "216, 178", "217, 176", "217, 179", "218, 172", "218, 173", "218, 175", "218, 179", "218, 183", "218, 184", "219, 171", "219, 173", "219, 175", "219, 178", "219, 181", "219, 182", "219, 184", "220, 170", "220, 174", "220, 179", "220, 180", "220, 184", "221, 170", "221, 177", "221, 178", "221, 179", "221, 181", "221, 182", "221, 183", "221, 184", "222, 170", "222, 171", "222, 174", "222, 175", "222, 176", "222, 180", "223, 170", "223, 172", "223, 173", "223, 179", "223, 180"], "AreaNum": 56, "PixelNumber": 72, "CenterPoint": "219, 176" }, { "Points": ["234, 182", "234, 183", "234, 184", "235, 182", "235, 183", "235, 184", "236, 181", "236, 182", "237, 181", "237, 183", "237, 184", "237, 185", "237, 186", "238, 181", "238, 187", "239, 179", "239, 180", "239, 181", "239, 187", "239, 188", "239, 189", "239, 190", "240, 176", "240, 177", "240, 178", "240, 180", "240, 182", "240, 185", "240, 186", "240, 189", "240, 190", "241, 176", "241, 181", "241, 184", "241, 188", "241, 190", "242, 176", "242, 177", "242, 178", "242, 179", "242, 180", "242, 182", "242, 184", "242, 189", "242, 190", "243, 180", "243, 182", "243, 183", "243, 184", "243, 190", "243, 191", "244, 180", "244, 182", "244, 190", "244, 192", "244, 193", "244, 194", "244, 195", "245, 191", "245, 193", "245, 194", "246, 191", "246, 192", "246, 194", "247, 190", "247, 191"], "AreaNum": 78, "PixelNumber": 91, "CenterPoint": "240, 184" }, { "Points": ["439, 142", "439, 143", "440, 142", "441, 141", "441, 142", "442, 141", "442, 142", "443, 140", "443, 141", "444, 139", "444, 140", "445, 138", "445, 139", "446, 138", "446, 139", "447, 137", "447, 139", "448, 137", "448, 138", "449, 136", "449, 137", "450, 133", "450, 134", "450, 135", "450, 137", "451, 134", "451, 136", "452, 134", "452, 135", "453, 134", "453, 135", "454, 133", "454, 135", "455, 132", "455, 134", "455, 135", "456, 132", "456, 133", "457, 131", "457, 133", "458, 130", "458, 132", "458, 133", "459, 130", "459, 131", "460, 129", "460, 131", "461, 128", "461, 130", "462, 128", "462, 130", "463, 127", "463, 130", "464, 127", "464, 129", "465, 126", "465, 128", "465, 129", "466, 125", "466, 127", "467, 124", "467, 127", "467, 128", "468, 124", "468, 126", "469, 123", "469, 126", "470, 123", "470, 126", "471, 122", "471, 126", "472, 121", "472, 125", "473, 121", "473, 124", "474, 120", "474, 123", "475, 120", "475, 123", "476, 119", "476, 122", "477, 118", "477, 122", "478, 117", "478, 122", "479, 117", "479, 121", "480, 116", "480, 121", "480, 122", "481, 116", "481, 120", "481, 122", "481, 123", "482, 115", "482, 119", "483, 115", "483, 118", "484, 114", "484, 117", "484, 118", "485, 113", "485, 116", "486, 111", "486, 112", "486, 117", "487, 112", "487, 116", "488, 112", "488, 115", "489, 111", "489, 115", "489, 116", "490, 110", "490, 114", "491, 109", "491, 115", "492, 107", "492, 108", "492, 116", "493, 108", "493, 114", "493, 115", "493, 116", "493, 117", "494, 108", "494, 113", "494, 117", "494, 118", "494, 119", "495, 107", "495, 112", "495, 113", "495, 114", "495, 115", "495, 118", "495, 119", "496, 106", "496, 111", "496, 114", "496, 115", "496, 116", "496, 117", "497, 105", "497, 111", "497, 116", "497, 117", "497, 118", "498, 105", "498, 110", "499, 104", "499, 111", "499, 112", "500, 103", "500, 110", "500, 113", "501, 103", "501, 109", "501, 111", "501, 112", "501, 114", "501, 115", "502, 102", "502, 109", "502, 113", "502, 115", "503, 102", "503, 109", "503, 114", "504, 101", "504, 110", "505, 100", "505, 111", "505, 112", "505, 113", "506, 100", "506, 107", "506, 108", "506, 112", "507, 99", "507, 106", "507, 109", "507, 110", "507, 112", "508, 98", "508, 107", "508, 108", "508, 111", "509, 98", "509, 109", "509, 110", "510, 98", "510, 110"], "AreaNum": 234, "PixelNumber": 420, "CenterPoint": "486, 115" }];
    </script>
</head>
<body>
    <button id='ToggleConnection' type="button" onclick='conn();'>
        连接服务器</button><br />
    <br />
    <button id='ToggleConnection' type="button" onclick='SendData();'>
        发送内容：beston</button><br />
    <br />
    <button id='ToggleConnection' type="button" onclick='SendData2();'>
        查看状态</button><br />
    <br />
    <div id="test" style="width:1024px"></div>
</body>
</html>
